<template>
  <div v-if="sureAdmin">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/order' }">订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户详情</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 用户列表区域 -->
      <el-table :data="userlist" border stripe>
        <!-- <el-table-column type="index"></el-table-column> -->
        <el-table-column
          label="用户名称"
          prop="name"
          sortable
          min-width="10%"
        ></el-table-column>
        <el-table-column label="用户权限" prop="admin" sortable min-width="10%">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.admin === 0 ? 'success' : '#409EFF'"
              disable-transitions
            >
              {{ scope.row.admin === 0 ? "普通用户" : "管理人员" }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          label="会员身份"
          prop="memberStr"
          sortable
          min-width="10%"
        >
          <template slot-scope="scope">
            <el-tag
              :type="
                scope.row.memberStr === '钻石会员'
                  ? '#409EFF'
                  : scope.row.memberStr === '金卡会员'
                  ? 'warning'
                  : scope.row.memberStr === '银卡会员'
                  ? 'info'
                  : 'success'
              "
              disable-transitions
              >{{ scope.row.memberStr }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          label="用户等级"
          prop="grade"
          sortable
          min-width="10%"
        ></el-table-column>
        <el-table-column
          label="用户积分"
          prop="integral"
          sortable
          min-width="10%"
        ></el-table-column>
        <el-table-column
          label="用户经验"
          prop="experience"
          sortable
          min-width="10%"
        >
          <!-- <template slot-scope="scope">
            {{ scope.row.experience / 100 }}元
          </template> -->
        </el-table-column>
        <el-table-column
          label="用户电话"
          prop="phone"
          min-width="10%"
        ></el-table-column>
        <el-table-column label="操作" min-width="18%">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="togetRecharge(scope.row.id)"
              >充值记录</el-button
            >
            <el-button
              type="success"
              size="mini"
              @click="togetConsume(scope.row.id)"
              >消费记录</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userlist: [],
      // total: 0,
      sureAdmin: false,
      
    };
  },
  created() {
    var Admin = window.localStorage.getItem("admin");
    
    if (Admin == 1) {
      this.sureAdmin = true;
      this.getUserById(this.$route.params.id);
    } else {
      this.sureAdmin = false;
    }
  },
  methods: {
    async getUserById(id) {
      console.log("jinru")
      const { data: res } = await this.$http.get("user/getUserById?id="+id);
      console.log(res);
      if (res.code !== 200) {
        return this.$message.error("获取用户列表失败！");
      }
      // this.userlist[0] = res.data.user;
      this.userlist.push (res.data.user);
    },
    togetRecharge(id) {
      this.$router.push("/users/userRecharge/" + id+"/2");
    },
    togetConsume(id){
      this.$router.push("/users/userConsume/" + id+"/2");
    },
  },
};
</script>

<style lang="less" scoped>
.button:hover {
  background-color: rgb(64, 158, 255);
  color: rgb(255, 255, 255);
}
</style>
